<template>
    <div class="bottom flex">
        <el-form :inline="true" :model="asData" class="demo-form-inline">
            <el-form-item :label="item.label" 
            v-for="item in asList"
            :key="item.name"
            class="input-box"
            :class="{ 'time-picker': item.type === 'time' }">
        <el-select
            size="small"
            class="select-box"
            :style="{'width':item.width}"
            v-if="item.type === 'select'"
            v-model.trim="asData[item.name]"
            :placeholder="item.placeholder"
            maxlength="100"
            :filterable="item.filterable"
            :clearable="item.clearable"
        >
            <el-option
              v-for="subitem in item.data"
              :key="subitem.number"
              :label="subitem.text"
              :value="subitem.number"
            ></el-option>
          </el-select>

          <!-- 自定义参数下拉框 - 有传函数进来 -->
          <el-select
          size="small"
            class="select-box"
            v-if="item.type === 'customSelect' && item.fn"
            @change="item.fn(asData[item.name])"
            v-model.trim="asData[item.name]"
            :placeholder="item.placeholder"
            maxlength="100"
            :filterable="item.filterable"
            :clearable="item.clearable"
             @clear="clearSelectHavefn(item.name)"
          >
            <el-option
              v-for="subitem in item.data"
              :key="subitem[item.value]"
              :label="subitem[item.label]"
              :value="subitem[item.value]"
            ></el-option>
          </el-select>

          <!-- 自定义参数下拉框 - 没有传函数进来 -->
          <el-select
          size="small"
            class="select-box"
             @change="changeChannel(item)"
            v-if="item.type === 'customSelect' && !item.fn"
            v-model.trim="asData[item.name]"
            :placeholder="item.placeholder"
            maxlength="100"
            :filterable="item.filterable"
            :clearable="item.clearable"
            @clear="clearSelect(item.name)"
          >
            <el-option
              v-for="subitem in item.data"
              :key="subitem[item.value]"
              :label="subitem[item.label]"
              :value="subitem[item.value]"
            ></el-option>
          </el-select>

          <!-- input 标签 -->
          <el-input
          size="small"
            :style="{'width':item.width}"
            v-if="item.type === 'text'"
            class="as-input"
            :placeholder="item.placeholder"
            type="item.type"
            @keyup.enter="advancedSearch"
            v-model.trim="asData[item.name]"
            maxlength="100"
          ></el-input>
          <!-- 数字类型 -->
          <el-input-number
            v-model.trim="asData[item.name]"
            v-if="item.type === 'num'"
            class="as-input num-input"
            :placeholder="item.placeholder"
            type="item.type"
            @keyup.enter.native="advancedSearch"
            :min="0"
            :precision="0"
            maxlength="100"
            :controls="false"
          />

          <div
            v-if="item.type==='selectTime'"
            style="width:480px;display:flex;align-items:center"
          >
            <el-select style="width:140px" size="small" v-model.trim="asData[item.name]" placeholder="请选择">
                <el-option
                  v-for="el in item.data"
                  :key="el.type"
                  :label="el.label"
                  :value="el.type">
                </el-option>
            </el-select>
            <el-date-picker
            class="time-picke-my"
              v-model.trim="asData[item.type]"
              size="small"
              unlink-panels
              value-format='yyyy-MM-dd HH:mm:ss'
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>

          </div>

          <!-- number 类型的input (价格 - 价格) -->
          <div
            v-if="item.type === 'price'"
            class="price-input flex-justify-space-between flex-align-center"
          >
            <!-- <div v-for="(priceItem, priceIndex) in item.data" :key="priceIndex"> -->
            <el-input-number
              @keyup.enter.native="advancedSearch"
              :placeholder="item.data[0].placeholder"
              class="price-number"
              v-model.trim="asData[item.data[0].name]"
              :min="0"
              size="small"
              :precision="4"
              :controls="false"
            ></el-input-number>
            <!-- </div> -->
            <div class="price-line"></div>
            <el-input-number
            size="small"
              @keyup.enter.native="advancedSearch"
              :placeholder="item.data[0].placeholder"
              class="price-number"
              v-model.trim="asData[item.data[1].name]"
              :min="0"
              :precision="4"
              :controls="false"
            ></el-input-number>
          </div>

          <!-- 日期时间选择器 -->
          <el-date-picker
          size="small"
            class="date-time-picker"
            v-if="item.type === 'time'"
            v-model="asData[item.name]"
            :type="item.props"
            value-format='yyyy-MM-dd HH:mm:ss'
            range-separator="至"
            :start-placeholder="item.placeholder1"
            :end-placeholder="item.placeholder2"
            :default-time="
              item.defaultTime ? item.defaultTime : ['00:00:00', '00:00:00']
            "
          ></el-date-picker>

          <!-- 省市区联动 -->
          <el-cascader
          size="small"
            v-if="item.type === 'picker'"
            maxlength="100"
            class="picker"
            v-model.trim="asData[item.name]"
            :options="item.data"
            :props="item.props"
            :filterable="item.filterable ? true : false"
            :placeholder="item.placeholder"
            :clearable="item.clearable ? true : false"
          ></el-cascader>
        </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
export default {
    props:{
        asList: {
        type: Array,
        default: () => []
        },
    },
    created(){
    },
    data(){
        return{
            asData:{}
        }
    },
    methods:{
        onSubmit() {
            for (let key in this.asData) {
                if (!this.asData[key] && this.asData[key] !== 0) {
                delete this.asData[key]
                }
            }
            this.$emit("advancedSearch", this.asData)
        },
    }
}
</script>

<style lang='scss' scoped>
.bottom{
    display: flex;
    align-items: center;
    border-bottom: 1px solid#eeeeee;
    min-height: 50px;
}
</style>